<template>
    <div class="page">
        <ChfSesectTree v-bind="treeConfig" ref="tree" v-model="value" />
    </div>
</template>

<script>
import ChfSesectTree from "@/components/chf-selectTree/index.vue"
export default {
    components: {
        ChfSesectTree
    },
    data () {
        return {
            value: [],
            treeConfig: {
                options: {
                    props: {
                        label: 'name'
                    },
                    setLabel (item) {
                        if (item.isButton) {
                            return item.title
                        }
                        return item.meta.title
                    },
                    data: [],
                    ['node-key']: "id",
                    ['filter-node-method'] (value, data) {
                        if (!value) return true;
                        return data.meta.title?.indexOf(value) !== -1;
                    },
                    ['render-content']: (h, { node, data, store }) => {
                        return (
                            <span class="custom-tree-node">
                                {
                                    node.level === 1 ? <i class={data.meta.icon}></i> : ''
                                }
                                <span>{data.meta.title}</span>
                            </span>
                        )
                    },
                },
                events: {
                    check: (data, checked) => {
                        this.value = checked.checkedKeys
                    },
                },
                query: async (options) => {
                    const { result } = await this.$api.getMenuList();
                    options.data = result;
                    this.value = [
                        1, 2, 3, 4
                    ]
                }
            }
        };
    },
};
</script>

<style lang="scss" scoped>
.page {
}
</style>